{% extends 'home/public/base.html' %}

{% block js %}
	<link rel="stylesheet" type="text/css" href="/static/home/public/css/order.css">
	<link rel="stylesheet" type="text/css" href="/static/home/public/css/order-app.css">

{% endblock %}

{% block con %}
<div class="mainbody order">
	<div class="container">
		<!-- 面包屑导航 -->
		<div class="crumbs col-xs-12 col-sm-12">
			<ol class="breadcrumb">
				<li class="hidden-xs hidden-sm"><a href="{% url 'index' %}">首页</a></li>
				<li class="hidden-xs hidden-sm"><a href="">我的商城</a></li>
				<li class="active">我的订单</li>
			</ol>
		</div><!-- 面包屑导航 E-->
		
		<div class="main clearfix">
			<!-- 左侧导航 -->
			<div class="left-nav f-fl col-md-4 hidden-xs hidden-sm">
				<div class="nav-main">
					<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
					<a href="#" class="ml active">我的订单</a>
					<a href="#" class="ml ">我的回购单</a>
					<a href="#" class="ml ">我的意外保</a>
					<a href="{% url 'orderone' %}" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
					<a href="{% url 'orderadd' %}" class="ml ">地址管理</a>
					<a href="#" class="ml ">我的收藏</a>
					<a href="#" class="ml ">消息提醒</a>
					<a href="#" class="ml ">建议反馈</a>
				</div>
			</div><!-- 左侧导航 E-->
			<!-- 右侧内容展示 -->
			<div class="right-content f-fr col-md-8 col-xs-12 col-sm-12">
				<div class="order-main">
					<div class="type-tab-btn">

						<a href="?p=0" class="allOrder  col-20" data-type="-1">全部订单</a><i class="line hidden-xs hidden-sm">|</i>
						<a class="waitPay col-20" href="?p=1" data-type="0">待付款<span class=" amount _actAmount"></span></a><i class="line hidden-xs hidden-sm">|</i>
						<a class="waitDeliver col-20" href="?p=2" data-type="1">待发货</a><i class="line hidden-xs hidden-sm">|</i>
						<a class="hasDeliver col-20" href="?p=3" data-type="2">已发货</a><i class="line hidden-xs hidden-sm">|</i>
						<a class="other col-20" href="javascript:;" data-type="99">其他</a>
					</div>

					<div class="list-head hidden-xs hidden-sm">

                    <ul class="clearfix">
                        <li class="w50">
                            <select id="checkType" class="check-type">
                                <option value="0">近三个月的订单</option>
                                <option value="1">全部订单</option>
                            </select>
                            订单明细
                        </li>
                        <li class="w125">售后</li>
                        <li class="w125">金额</li>
                        <li class="w125">状态</li>
                        <li class="w125">操作</li>
                    </ul>
					</div>
					<div id="tableList" class="type-contain ui-load-container">
						<div class="ui-load-content"><input id="unPayNum" value="0" type="hidden">
							<table class="orderItem">
								
								<tbody>
									{% for i in order %}	
									<tr class="trHead hidden-xs hidden-sm">
										<td colspan="4" class="title clearfix">
										  <div class="f-fl">下单时间：<span class="time">{{ i.addtime|date:"Y-m-d H-i-s"  }}</span>订单号：<span class="orderNumber">{{ i.id }}</span>
										  </div>
										</td>
									</tr>
									
									<tr class="list-box b-l b-r b-b">
										<td class="list b-r j-iamCart">
											<div class="cart-wrap j-CartWrap">
												<div class="shop j-shop j-amLight">
												{%  for ii in i.orderinfo_set.all %}
											
											
												
												<div class="item b-t clearfix j-item j-iamMain">
													<a class="productDetail nameWidth col-xs-4 col-sm-4" href="//detail.meizu.com/item/pro7.html" target="_blank">
														<img src="{{ ii.gid.pic  }}" style="width:100px;height: 100px" class="f-fl">
													</a>
													<div class="describe f-fl col-xs-8 col-sm-8">
														<div class="vertic clearfix">
															<span class="clearfix">
																<a class="productDetail nameWidth" href="#" target="_blank">
																	<i>{{ ii.gid.title }}</i> <i class="pro-d"></i>
																</a>
																<p>
																￥{{ ii.gid.price }} × {{ ii.num }}
																</p>
															</span>
														</div>
													</div>
													<input class="orderSn" value="51090244361541573081" type="hidden">
													<input class="isCart" value="1" type="hidden">
													<input class="orderSnSon" value="21090244361541579081" type="hidden">
												</div>
													{% endfor %}
												</div>
											</div>
										</td>

										<td class="b-r w125 center price b-t hidden-xs hidden-sm">
											<div class="priceDiv">
												{{ i.totalprice }}
												
											</div>
										</td>
										<td class="b-r w125 center state b-t hidden-xs hidden-sm">
											<div class="stateDiv">
											{% if i.status == 1  %}

												<div>待付款<br></div>
											{% elif i.status == 2  %}
												<div>已付款,待发货<br></div>
											
											{% elif i.status == 3  %}
												<div>已发货,待收货<br></div>	

											{% elif i.status == 4  %}
												<div>已完成<br></div>

											{% elif i.status == 4  %}
												<div>已取消<br></div>		

											{% endif %}
											</div>
										</td>
										<td class="w125 center opreat b-t hidden-xs hidden-sm">
											<ul>
												<li orderid='{{ i.id }}' class="more">


												
												<a  href="#" target="_blank" data-toggle="modal" data-target="#myModal" class="info">
												  查看详情
												</a>

												</li>

												{% if i.status == 1 %}
												<li class="more"><a href="/order/buy?orderid={{ i.id }}" target="_blank">支付订单</a></li>
												{% endif %}
												<!-- Button trigger modal -->
												

												<!-- 模态框 -->
												<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
												  <div class="modal-dialog" role="document">
												    <div class="modal-content">
												      <div class="modal-header">
												        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
												        <h4 class="modal-title" id="myModalLabel">订单详情</h4>
												      </div>
												       <div class="modal-body goods">
												        商品名称：
												      </div>
												       <div class="modal-body    money">
												        付款金额：
												      </div>
												   
												      <div class="modal-body dd ">
												        订单状态：
												      </div>
												      <div class="modal-body add">
												        收货地址：
												      </div>
												      <div class="modal-body addname">
												        收货人：
												      </div>
												      <div class="modal-body danhao">
												       
												      </div>
												     
												      <div class="modal-footer">
												        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
												       
												      </div>
												    </div>
												  </div>
												</div>



											</ul>
										</td>

									</tr>
									
								{% endfor %}	
								</tbody>
								
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var m = window.location.search

        console.log(m)
        console.log(typeof(m))
        // $('a[href=m]').addClass('active')
       $('.type-tab-btn a').each(function(){
            var n = $(this).attr('href')
            if (n==m) {
                $(this).addClass('active')
            }
       })

    })
$("#myModal").modal({
    backdrop:false,
    keyboard:false,
    show:false,

});

$(".info").click(function(){
	var id=$(this).parent().attr("orderid")
	$.get('{% url "orderinfos" %}',{id:id},function(data){
		$(".goods").html("购买商品："+data["order"]["titlelist"]) 
		if(data["order"]["status"]==1){
			$(".dd").text('商品状态：待付款') }
		else if(data["order"]["status"]==2){
			$(".dd").text('商品状态：待发货') 

		}
		else if(data["order"]["status"]==3){
			$(".dd").text('商品状态：已发货') 

		}
		$(".add").text('收货地址：'+data["order"]["adds"])
		$(".addname").text('收货人:'+data["order"]["aname"])
		$(".money").text("付款金额:￥"+data["order"]["money"]+"元")
		if(data["order"]["oddnum"]){
			$(".danhao").text(data["order"]["wuliu"]+":"+data["order"]["oddnum"])
		}
		
	})



})

</script>


{% endblock %}